<template>
  <d2-container>
    <template slot="header">Page 1 header</template>
    <el-button @click="newFlow" type="primary">新建flow</el-button>
    <el-button @click="viewFlow" type="primary">查看flow</el-button>
    <el-button @click="editFlow" type="primary">编辑flow</el-button>
    <br />
    <br />

    <el-button @click="newMind" type="success">新建mind</el-button>
    <el-button @click="viewMind" type="success">查看mind</el-button>
    <el-button @click="editMind" type="success">编辑mind</el-button>
    <br />
    <br />

    <el-button @click="newSheet" type="info">新建sheet</el-button>
    <el-button @click="viewSheet" type="info">查看sheet</el-button>
    <el-button @click="editSheet" type="info">编辑sheet</el-button>
    <br />
    <br />

    <el-button @click="newMd" type="warning">新建Md</el-button>
    <el-button @click="viewMd" type="warning">查看Md</el-button>
    <el-button @click="editMd" type="warning">编辑Md</el-button>
    <br />
    <br />

    <el-button @click="newTd" type="danger">新建Td</el-button>
    <el-button @click="viewTd" type="danger">查看Td</el-button>
    <el-button @click="editTd" type="danger">编辑Td</el-button>
    <br />
    <br />

    <el-button @click="showDialog" type="danger">showDialog</el-button>
    <catalogDialog
      :visible.sync="dialogVisible"
      @updateVisible="updateVisible"
      @submitPopupData="submitPopupData"
      @handleClose="handleClose"
      :popupWidth="'550px'"
    ></catalogDialog>

    <h3>数字滚动</h3>
    <countTo :startVal="startVal" :endVal="endVal" :duration="3000"></countTo>
    <br />
    <br />
    <el-button @click="vxetable(1)" type="danger">表格编辑计算</el-button>
    <br />
    <br />
    <el-button @click="qrcanvas(1)" type="danger">二维码</el-button>

    <el-button @click="downloadPDF" type="danger">下载pdf</el-button>

    <el-button @click="newpage" type="danger">下载pdf</el-button>

  </d2-container>
</template>

<script>
import catalogDialog from '../../hk/catalogDialog'
import countTo from '@/components/CountTo/vue-countTo.vue'
import aaaa, { aaa, bbb } from './exportFun'
import FileSaver from './FileSaver'
// import FileSaver from 'file-saver'

export default {
  name: 'page1',
  components: {
    catalogDialog,
    countTo
  },
  data () {
    return {
      dialogVisible: false,
      fileType: '',
      id: '',
      startVal: 0,
      endVal: 2017
    }
  },
  created () {
    aaa()
    aaaa()
    bbb()
  },
  methods: {
    downloadPDF () {
      const PDFFile = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'
      const PDFFileName = '测试pdf'
      FileSaver.saveAs(PDFFile, PDFFileName)
    },
    newPage () {
      this.$router.push({
        name: 'hk-edit',
        params: { fileType: this.fileType }
      })
    },
    editPage () {
      this.$router.push({
        name: 'hk-edit',
        params: { id: this.id }
      })
    },
    viewPage () {
      this.$router.push({
        name: 'hk-view',
        params: { id: this.id }
      })
    },
    newFlow () {
      this.fileType = 'flow'
      this.newPage()
    },
    newMind () {
      this.fileType = 'mind'
      this.newPage()
    },
    newSheet () {
      this.fileType = 'sheet'
      this.newPage()
    },
    newMd () {
      this.fileType = 'md'
      this.newPage()
    },
    newTd () {
      this.fileType = 'td'
      this.newPage()
    },
    viewFlow () {
      this.id = '111'
      this.viewPage()
    },
    viewMind () {
      this.id = '222'
      this.viewPage()
    },
    viewSheet () {
      this.id = '333'
      this.viewPage()
    },
    viewMd () {
      this.id = '444'
      this.viewPage()
    },
    viewTd () {
      this.id = '555'
      this.viewPage()
    },
    editFlow () {
      this.id = '111'
      this.editPage()
    },
    editMind () {
      this.id = '222'
      this.editPage()
    },
    editSheet () {
      this.id = '333'
      this.editPage()
    },
    editMd () {
      this.id = '444'
      this.editPage()
    },
    editTd () {
      this.id = '555'
      this.editPage()
    },
    showDialog () {
      this.dialogVisible = true
    },
    // 修改是否让页面显示与隐藏的事件
    updateVisible (val) {
      this.dialogVisible = val
    },
    // 点击确定的按钮
    async submitPopupData () {
      this.dialogVisible = false
    },
    // 关闭弹框（头部的X）
    handleClose () {
      this.dialogVisible = false
    },
    vxetable (param) {
      if (param === 1) {
        console.log(213)
        this.$router.push({
          name: 'vxe-editSum'
        })
      }
    },
    qrcanvas () {
      this.$router.push({
        name: 'qrcanvas'
      })
    }
  }
}
</script>
